<template>
  <div class="horizontal-stacked-bar">
    <!-- ECharts图表容器：与脚本中id="main2"精准对应 -->
    <div id="main2" class="chart-container"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { onMounted, onUnmounted } from 'vue'; // 引入生命周期钩子，确保DOM加载完成
import {
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

// 注册ECharts所需组件
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
]);

onMounted(() => {
  // 关键优化：在DOM挂载完成后初始化图表，避免"invalid dom"错误
  const chartDom = document.getElementById('main2');
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    
    // 图表配置项（保留原有逻辑，优化样式与布局）
    const option = {








      title: {
        text: '收胚入库',
        // 调整标题位置，与外部标题呼应
        left: 'center',
        top: 0,
        textStyle: {
          fontSize: 16,
          color: '#333'
        }
      },
      toolbox: {
        feature: {
          saveAsImage: {
            iconStyle: {
              color: '#666'
            },
            title: '保存图表'
          }
        },
        right: 10,
        top: 10
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        // 优化提示框样式：提升可读性与视觉一致性
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e5e7eb',
        borderWidth: 1,
        borderRadius: 6,
        padding: 10,
        textStyle: {
          color: '#333',
          fontSize: 12
        }
      },
      legend: {
        // 调整图例位置：避免遮挡，适配容器宽度
        top: 0,
        left: 'left',
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
          fontSize: 12,
          color: '#666'
        },
        // 自动换行：防止图例过多时溢出
        formatter: (name) => name,
        width: '80%'
      },
      grid: {
        // 预留空间：为图例、坐标轴标签留出位置
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '18%', // 为顶部图例预留空间
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f3f4f6'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'category',
        data: ['2025-08-01', '2025-08-02','2025-08-03','2025-08-04','2025-08-05','2025-08-06','2025-08-07'],
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      series: [
        {
          name: '正常胚布',
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
            fontSize: 10, // 调整标签字体大小，避免拥挤
            color: '#000'
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 302, 301, 334, 390, 330, 320],
          itemStyle: {
            color: '#ecc5e3' // 自定义颜色，提升区分度
          }
        },
        {
          name: '色布政色',
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
            fontSize: 10,
            color: '#fff'
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210],
          itemStyle: {
            color: '#bd55ac'
          }
        },
        {
          name: '退回返工',
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
            fontSize: 10,
            color: '#fff'
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310],
          itemStyle: {
            color: '#7b3456'
          }
        }
       
      ],
      // 优化动画：提升加载体验
      animationDuration: 1200,
      animationEasing: 'cubicOut'
    };

    // 渲染图表
    option && myChart.setOption(option);

    // 监听窗口 resize 事件：自动适配屏幕尺寸
    const handleResize = () => {
      myChart.resize();
    };
    window.addEventListener('resize', handleResize);

    // 组件卸载时清理：防止内存泄漏
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
      myChart.dispose(); // 销毁图表实例，释放资源
    });
  }
});
</script>

<style scoped>
/* 组件外层容器：控制整体布局与视觉风格 */
.horizontal-stacked-bar {
  width: 100%;
  min-height: 500px;
  margin: 10px auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 图表头部：标题与说明样式 */
.chart-header {
  margin-bottom: 16px;
}

.chart-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.chart-subtitle {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

/* 图表容器：必须设置明确宽高，否则ECharts无法渲染 */
.chart-container {
  width: 100%;
  height: 450px; /* 桌面端默认高度，确保数据完整显示 */
}

/* 响应式适配：针对移动端优化 */
@media (max-width: 768px) {
  .horizontal-stacked-bar {
    padding: 16px;
    margin: 16px auto;
  }

  .chart-container {
    height: 350px; /* 移动端减小高度，适配屏幕 */
  }

  .chart-title {
    font-size: 16px;
  }

  .chart-subtitle {
    font-size: 12px;
  }

  /* 移动端隐藏部分标签，避免拥挤 */
  ::v-deep .echarts-series-label {
    display: none !important;
  }
}
</style>